<template>
  <h1>Life Cycle</h1>
<!--  <button @click="goto">Detail</button>-->
  {{name}}
</template>

<script>
import {defineComponent, ref} from "vue";
import {useRouter, useRoute} from 'vue-router';
import {onMounted, onUnmounted} from 'vue';

export default defineComponent({
  name: "LifeCycle",
  setup(){ // 1.组件创建的过程
    let router = useRouter()
    let route = useRoute()

    let num = ref(null)
    let name = ref('hugo')
    let obj = ref({})

    onMounted(() => {
      // 2.组件挂载的过程, 包括 数据 dom...
      // 常用于: 发请求、数据初始化操作、接收路由传递的参数
      // num.value = route.query.num * 1
      // name.value = route.query.name
      // obj.value = JSON.parse(obj.value)
      console.log('onMounted')
      console.log(name.value)
    })

    onUnmounted(() => {
      // 3. 组件卸载时的生命周期
      // 常用于: 清除定时器 清除闭包函数..
      console.log('onUnmounted')

    })

    return{
      num,
      name,
      obj,
    }
  }


})
</script>

<style scoped>

</style>
